/*
 * @Description:
 * @Version: 2.0
 * @Autor: wangmiao
 * @Date: 2022-08-31 14:39:49
 * @LastEditors: wangmiao
 * @LastEditTime: 2022-09-01 09:37:55
 */
import React, { useEffect, useState } from 'react'
import { Select, Form } from 'antd'
import { getAreaByCode } from '@/request/AreaSelector/AreaSelector'
import { selectType } from '@/constants/consts'
import styles from './index.module.scss'
import { formInfoType } from '@/models/home'
interface IProps {
  formInfo: formInfoType | undefined
  setFormInfo: any
}

const AreaSelector: React.FC<IProps> = ({ setFormInfo, formInfo }) => {
  const [areaDataInfo, setAreaDataInfo] = useState({
    provincialList: [],
    regionalList: [],
    countyList: [],
  })
  useEffect(() => {
    ;(async () => {
      const res: any = await getAreaByCode({ code: '' })
      if (res.status) {
        setAreaDataInfo((prev) => ({
          ...prev,
          provincialList: res.data,
        }))
      }
    })()
  }, [])
  const changeAreaSelect = async (type: string, value: string) => {
    const res: any = await getAreaByCode({
      code: value,
    })
    switch (type) {
      case selectType.provincial:
        if (value) {
          if (res.status === 200) {
            setAreaDataInfo((prev) => ({
              ...prev,
              regionalList: res.data,
              countyList: [],
            }))
          }
        } else {
          setAreaDataInfo((prev) => ({
            ...prev,
            regionalList: [],
            countyList: [],
          }))
        }
        setFormInfo((prev: formInfoType) => ({
          ...prev,
          provincial: value || '',
          regional: '',
          county: '',
        }))
        break
      case selectType.regional:
        if (value) {
          if (res.status === 200) {
            setAreaDataInfo((prev) => ({
              ...prev,
              countyList: res.data,
            }))
          }
        } else {
          setAreaDataInfo((prev) => ({
            ...prev,
            countyList: [],
          }))
        }
        setFormInfo((prev: formInfoType) => ({
          ...prev,
          regional: value || '',
          county: '',
        }))
        break

      default:
        setFormInfo((prev: formInfoType) => ({
          ...prev,
          county: value || '',
        }))
        break
    }
  }
  return (
    <div className={styles.container}>
      <Form>
        <Form.Item>
          <Select
            placeholder='请选择省'
            value={formInfo?.provincial || undefined}
            allowClear
            style={{ width: 180 }}
            onChange={(event) => changeAreaSelect(selectType.provincial, event)}
          >
            {areaDataInfo?.provincialList?.map(({ Code, Name }, index) => (
              <Select.Option key={index} value={Code}>
                {Name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item>
          <Select
            placeholder='请选择市'
            value={formInfo?.regional || undefined}
            allowClear
            style={{ width: 180 }}
            onChange={(event) => changeAreaSelect(selectType.regional, event)}
          >
            {areaDataInfo?.regionalList?.map(({ Code, Name }, index) => (
              <Select.Option key={index} value={Code}>
                {Name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item>
          <Select
            allowClear
            placeholder='请选择区/县'
            value={formInfo?.county || undefined}
            style={{ width: 180 }}
            onChange={(event) => changeAreaSelect(selectType.county, event)}
          >
            {areaDataInfo?.countyList?.map(({ Code, Name }, index) => (
              <Select.Option key={index} value={Code}>
                {Name}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
      </Form>
    </div>
  )
}

export default AreaSelector
